<div class="widget_tableDiv">
<table id="myTable" >
    <thead>
        <tr>
            <td>Name</td>
            <td>Age</td>
            <td>Position</td>
            <td>Income</td>
            <td>Gender</td>
        </tr>
    </thead>
    <tbody class="scrollingContent">
        <tr>
            <td>John</td>
            <td>37</td>
            <td>Managing director</td>
            <td>90.000</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Susan</td>
            <td>34</td>
            <td>Partner</td>
            <td>90.000</td>
            <td>Female</td>
        </tr>
        <tr>
            <td>David</td>
            <td>29</td>
            <td>Head of production</td>
            <td>70.000</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Laura</td>
            <td>29</td>
            <td>Head of marketing</td>
            <td>70.000</td>
            <td>Female</td>
        </tr>
        <tr>
            <td>Kate</td>
            <td>18</td>
            <td>Marketing</td>
            <td>50.000</td>
            <td>Female</td>
        </tr>
        <tr>
            <td>Mona</td>
            <td>21</td>
            <td>Marketing</td>
            <td>53.000</td>
            <td>Female</td>
        </tr>
        <tr>
            <td>Mike</td>
            <td>21</td>
            <td>Marketing</td>
            <td>53.000</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Mark</td>
            <td>25</td>
            <td>Production</td>
            <td>52.000</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Peter</td>
            <td>33</td>
            <td>Production</td>
            <td>55.000</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Jennifer</td>
            <td>24</td>
            <td>Production</td>
            <td>49.000</td>
            <td>Female</td>
        </tr>
        <tr>
            <td>David</td>
            <td>25</td>
            <td>Photography</td>
            <td>51.000</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Anna</td>
            <td>42</td>
            <td>Head of photography</td>
            <td>56.000</td>
            <td>Female</td>
        </tr>
        <tr>
            <td>Rita</td>
            <td>30</td>
            <td>Photography</td>
            <td>54.000</td>
            <td>Female</td>
        </tr>
        <tr>
            <td>Magnus</td>
            <td>25</td>
            <td>Freelancer</td>
            <td>65.000</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Johnny</td>
            <td>29</td>
            <td>Freelancer</td>
            <td>63.000</td>
            <td>Male</td>
        </tr>

    </tbody>
</table>
</div>
<img src="images/white_cap.png" id="white" class="dragable"/>&nbsp;Juan G. Bernal<br />
<img src="images/blue_cap.png" id="blue" class="dragable" />&nbsp;Charly Aguirre<br />
<div id="dropable" class="dropable">
    <div id="item">
        No hay nada
    </div>
    <div style="clear: both;"></div>
</div>
<div class="trash" id="trash">
    Arrastra aqui para Quitarlos de la lista
</div>
<div style="height: 20px;">
    <p id="indicator" style="display: none;margin:0;margin-top:3px;padding:0;">
        <img alt="Indicator" src="images/spinner.gif" />
        updating cart...
    </p>
</div>
<script type="text/javascript">
    new Draggable('white',{revert:1});
    new Draggable('blue',{revert:1});
    Droppables.add('dropable',{accept: 'dragable', hoverclass:'dropable_hover', onDrop: function(element){new Ajax.Updater('item', 'proof2.php', {asynchronous:true, evalScripts:true, onComplete:function(request, json){Element.hide('indicator')}, parameters:'color='+encodeURIComponent(element.id),onLoading:function(request, json){Element.show('indicator')}});}});
    Droppables.add('trash',{accept: 'on_drop', hoverclass:'trash_hover', onDrop: function(element){new Ajax.Updater('item', 'proof3.php', {asynchronous:true, evalScripts:true, onComplete:function(request, json){Element.hide('indicator')}, onLoading:function(request, json){Element.show('indicator')}});}});
    initTableWidget('myTable','100%',250,Array('S','N',false,'N','S'));
</script>